<template>
  <div class="historicalArcBox">
    <div class="historicalArcTop">
      <div class="title">
        <span>员工历史归档</span>
        <div class="yearChange">
          <el-date-picker
            v-model="yearVal"
            value-format="yyyy"
            type="year"
            size="mini"
            width="130px"
            placeholder="选择年"
            @change="changeYear"
          />
        </div>
      </div>
    </div>

    <div v-loading="loading" class="historicalTable">
      <div v-for="( itemes, index) in tableData" :key="index" class="itemes">
        <div class="itemTopLab" :class="{act: itemes.act}">
          <div class="lab" @click="openTable(itemes,index)"> > </div>
          <!-- 具体数据 -->

          <div>
            <p class="title">{{ itemes.archiveMonth }}月员工报表 <span>{{ itemes.creationTime }}</span></p>
            <p class="labTit" @click="openTable(itemes,index)">考勤统计</p>
          </div>

          <div class="lest">
            <p class="itemTit totalman"><span>总人数</span></p>
            <p class="itemNum">{{ itemes.totalPeopleNum }}</p>
          </div>
          <div class="right">
            <p class="itemTit"><span>全勤人数</span></p>
            <p class="itemNum">{{ itemes.fullAttePeopleNum }}</p>
          </div>

        </div>
        <div v-show="itemes.act" class="itemDropDown">
          <el-table
            id="item"
            :data="contentData"
            height="300"
            border
            style="width: 100%;text-align: center"
          >
            <el-table-column prop="name" label="姓名" width="150px" />
            <el-table-column prop="workNumber" label="工号" width="150px" />
            <el-table-column prop="mobile" label="手机号" width="150px" />
            <el-table-column prop="department" label="部门" width="150px" />
            <el-table-column prop="leaveDays" label="事假" width="150px" />
            <el-table-column prop="salaryOfficialDays" label="调休" width="150px" />
            <el-table-column prop="normalDays" label="正常" width="150px" />
            <el-table-column prop="laterTimes" label="迟到次数" width="150px" />
            <el-table-column prop="earlyTimes" label="早退次数" width="150px" />
            <el-table-column prop="leaveDays" label="旷工天数" width="150px" />
            <el-table-column prop="salaryOfficialDays" label="是否全勤" width="150px" />
            <el-table-column prop="actualAtteOfficialDays" label="实际出勤天数(正式)" width="150px" />
            <el-table-column prop="salaryOfficialDays" label="应出勤工作日" width="150px" />
            <el-table-column prop="workingDays" label="计薪天数(正式)" width="150px" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArchivingList, getArchivingCont } from '@/api/attendances'
export default {
  data() {
    return {
      loading: false,
      num: 0,
      yearVal: '2021',
      tableData: [],
      contentData: []
    }
  },
  mounted() {
    // 获取历史归档列表
    this.getArchivingList()
  },
  methods: {
    async getArchivingList() {
      this.loading = true
      // console.log(this.yearVal)
      this.tableData = await getArchivingList({ year: this.yearVal })
      console.log(this.tableData)
      this.loading = false
    },
    // 展开报表
    // obj 指代当前月份的所有数据
    async  openTable(obj, index) {
      if (!obj.act) {
        // 如果没有控制详情页显示隐藏的属性,就会进来这个函数
        console.log(obj.archiveMonth)
        // 获取指定月份的社保报表
        this.contentData = await getArchivingCont({ id: obj.id })
        console.log(this.contentData)
        // this.$set(Array, index, newValue)
        // this.$set(this.tableData[index], 'contentData', data)
        this.loading = false
        // 通过this.$set给tableData数组添加一个act属性,控制报表详情的显示隐藏
        this.$set(this.tableData[index], 'act', true)
      } else {
        // 通过this.$set给tableData数组添加一个act属性,控制报表详情的显示隐藏
        this.$set(this.tableData[index], 'act', false)
      }
    },

    changeYear() {
      this.getArchivingList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../../styles/variables.scss';
.historicalArcBox{
  padding: 20px;
  .historicalArcTop{
    position:relative;
    background: #fff;
    padding:10px 15px 0 15px;
    .title{
      color:$blue;
      line-height: 40px;
      border-bottom: solid 2px $blue;
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
      padding: 0 25px;
      .yearChange{
        position: absolute;
        top:5px;
        right: 10px;
      }
    }
  }
  .historicalTable{
    background: #fff;
    .itemes{
      .itemTopLab{
        border-top:solid 1px #f0f0f0;
        border-bottom: solid 3px #ccc;
        padding: 15px;
        div{
          display: inline-block;
          padding:0 40px;
          // border-right: solid 1px #ccc;
        }
        div:last-child div:nth-child(2){
         margin-right: 250px;
        }
        .lest{
          margin-left: 760px;
        }
        .lab{
          position: relative;
          top:-15px;
          padding-right: 0;
          padding-left: 15px;
        }
        .labTit{
          cursor:pointer;
        }
        .title{
          font-size: 16px;
          margin: 10px 0;
          color: #999;
          span{
            position: relative;
            bottom:-2px;
            font-size: 13px;
            color:#999;
            margin-left: 5px;
          }
        }
        .itemTit{
          color:#999;
          margin: 8px 0;
          font-size: 13px;
        }
        .itemNum{
          font-size: 20px;
          margin: 0;
        }
      }
      .itemDropDown{
        background: #fff;
        .topLab{
          position: relative;
          padding: 15px;
          div{
            display: inline-block;
            margin: 0 10px;
            span{
              display: inline-block;
              position: relative;
              top:2px;
              margin-right: 5px;
              width: 15px;
              height: 15px;
              // background:$cl-1;
            }
          }
          .rightLabBox{
            position: absolute;
            right: -10px;
            top:10px;
            div{
              border:solid 1px $green;
              color:$green;
              border-radius:3px;
              padding: 4px 10px;
              font-size: 14px;
            }
          }
        }
      }
      .act{
        border-bottom:solid 3px $panGreen;
        .lab{
          color:$panGreen;
        }
        .labTit{
          color:$panGreen;
        }
      }
    }
    .itemes:hover{
      background: #fafbff;
    }
    .itemes .lab:hover{
      cursor:pointer;
    }
  }
}
</style>
